<template>
    <div>
        <div class="sx-handline-con">
    <div class="top-nav">
        <div class="same-nav " @click="nav(1)" :class="{active:number==1}">
            理念
            <i class="icon"></i>
        </div>
        <div class="same-nav" @click="nav(2)" :class="{active:number==2}">
            热点
            <i class="icon"></i>
        </div>
        <div class="same-nav" @click="nav(3)" :class="{active:number==3}">
            生活
            <i class="icon"></i>
        </div>
        <div class="same-nav" @click="nav(4)" :class="{active:number==4}">
            问答
            <i class="icon"></i>
        </div>
    </div>
    <div class="handlin-content">
        <div class="tab-con">
            <div class="same-box" v-for="item in hotln" :key="item.activityId" v-if="number==1">
            <div v-if=" hotln.length!=0" class="same-box-in">           
              <div class="left">
                    <img :src="item.activityImageUrl" alt="">
                </div>  
                <div class="right">
                    <h4 class="title"><router-link :to="{name:'headline',params:{id:item.activityId,qubie:0}}">{{item.activityTitle}}</router-link></h4>
                    <div class="down-info">
                        <span class="user">龙蛙网</span>
                        <span class="see" v-show="false"><i class="icon"></i>888</span>
                        <span class="zan" v-show="false"><i class="icon"></i>666</span>
                    </div>
                </div> 
                </div>
                <div v-else class="same-box-in">
                   对不起暂无数据 
                </div>  
            </div>
             <div class="same-box" v-for="item in  hotrd" :key="item.activityId" v-if="number==2">
                <div v-if="hotrd.length!=0" class="same-box-in">           
              <div class="left">
                    <img :src="item.activityImageUrl" alt="">
                </div>
                <div class="right">
                    <h4 class="title"><router-link :to="{name:'headline',params:{id:item.activityId,qubie:0}}">{{item.activityTitle}}</router-link></h4>
                    <div class="down-info">
                        <span class="user">龙蛙网</span>
                        <span class="see" v-show="false"><i class="icon"></i>888</span>
                        <span class="zan" v-show="false"><i class="icon"></i>666</span>
                    </div>
                </div> 
                </div>
                <div v-else class="same-box-in">
                   对不起暂无数据 
                </div>  
            </div>
             <div class="same-box" v-for="item in  live" :key="item.activityId" v-if="number==3">
                <div v-if="live.length!=0" class="same-box-in">           
              <div class="left">
                    <img :src="item.activityImageUrl" alt="">
                </div>
                <div class="right">
                    <h4 class="title"><router-link :to="{name:'headline',params:{id:item.activityId,qubie:0}}">{{item.activityTitle}}</router-link></h4>
                    <div class="down-info">
                        <span class="user">龙蛙网</span>
                        <span class="see" v-show="false"><i class="icon"></i>888</span>
                        <span class="zan" v-show="false"><i class="icon"></i>666</span>
                    </div>
                </div> 
                </div>
                <div v-else class="same-box-in">
                   对不起暂无数据 
                </div>  
            </div>
             <div class="same-box" v-for="item in  wenda" :key="item.activityId" v-if="number==4">
               <div v-if="wenda.length!=0" class="same-box-in">           
               <div class="left">
                    <img :src="item.activityImageUrl" alt="">
                </div>
                <div class="right">
                    <h4 class="title"><router-link :to="{name:'headline',params:{id:item.activityId,qubie:0}}">{{item.activityTitle}}</router-link></h4>
                    <div class="down-info">
                        <span class="user">龙蛙网</span>
                        <span class="see" v-show="false"><i class="icon"></i>888</span>
                        <span class="zan" v-show="false"><i class="icon"></i>666</span>
                    </div>
                </div> 
                </div>
                <div v-else class="same-box-in">
                   对不起暂无数据 
                </div>  
            </div>
        </div>
    </div>
</div>
    </div>
</template>
<style scoped>
  @import "../../assets/personal/css/sx_handline.css";
</style>
<script>
export default {
    data () {
        return {
            number:1,
            hotln:{},
            hotrd:{},
            live:{},
            wenda:{}
        }
    },
    mounted(){  
        this.toutiao(1);
        this.nav(1);
      
    },
    methods:{
        toutiao(){
              this.$http.get(this.APIURL_PREFIX+"/api/wap/activities?activityType=11").then((response) => {
                   this.hotln=response.data.data[0]["activity11"];
				}).catch(function(err){
					console.log(err)
                });
        },
        nav(id){
            this.number=id
            if(this.number==1){
                this.$http.get(this.APIURL_PREFIX+"/api/wap/activities?activityType=11").then((response) => {
                this.hotln=response.data.data[0]["activity11"];
				}).catch(function(err){
					console.log(err)
                });
            }else if(this.number==2){
                this.$http.get(this.APIURL_PREFIX+"/api/wap/activities?activityType=11").then((response) => {
                this.hotrd=response.data.data[0]["activity12"];
				}).catch(function(err){
					console.log(err)
                });
            }else if(this.number==3){
                 this.$http.get(this.APIURL_PREFIX+"/api/wap/activities?activityType=11").then((response) => {
                 this.live=response.data.data[0]["activity13"];
				}).catch(function(err){
					console.log(err)
                });
            }else{
                //问答遗留
            }
        }
    }
}
</script>
